<template>
  <div>
    <!-- 头部 -->
    <div class="address-top">
      <p @click="back">返回</p>
      <p>找人/群</p>
      <p class="no-content"></p>
    </div>
    <!-- 头部 end -->
    <!-- tab -->
    <ul class="address-tab white" style="padding:0 .45rem;">
      <li v-for="(val,key) in tabList" :class="{active:addClass===key}" @click="tabSelect(val,key)">{{val}}</li>
    </ul>
    <!-- 搜索 -->
    <div class="flex-between white search">
      <div>
        <img src="../../assets/img/addressList/search.png" class="img" alt="">
        <input class="input" v-model="searchVal" type="text" :placeholder="placeStr">
      </div>
      <div class="btn" @click="search">搜索</div> 
    </div>
    <div class="blank"></div>
    <!-- tab content 搜索结果-->
    <!--{{val}}-->   <!--  接口没有号码-->
    <div v-show="searchList && !isGroup" class="flex padd15 white search-list" @click="toDetails(searchList.To_Account)">
      <img class="img" :onerror="defaultImg" :src="searchList.Tag_Profile_IM_Image">
      <p class="name">{{searchList.Tag_Profile_IM_Nick}}</p>
      <p class="num">(<span>{{searchList.To_Account}}</span>)</p>
    </div>
    <div v-show="isGroup" v-for="item in groupRes" class="flex padd15 white search-list" @click="toGroupDetails(item)">
      <img class="img" :src="item.FaceUrl">
      <p class="name">{{item.Name}}</p>
      <p class="num">(<span>{{item.GroupId}}</span>)</p>
    </div>
    <!--无搜索结果-->
    <div v-show="noResult && !isGroup" class="search-none">
      <img src="../../assets/img/addressList/search-none.png" style="width: .78rem;">
      <p>无搜索结果</p>
    </div>
    <div v-show="noGroupResult && isGroup" class="search-none">
      <img src="../../assets/img/addressList/search-none.png" style="width: .78rem;">
      <p>无搜索结果</p>
    </div>
  </div>
</template>
<style lang="less" rel="stylesheet/less" scoped>
  .font16 {
    font-size: .16rem;
  }

  .color4a {
    color: #4A4A4A;
  }

  /* 搜索  */
  .search {
    height: .5rem;
    .img {
      width: .15rem;
      vertical-align: middle;
    }
    .input {
      padding-left: .1rem;
      .font16;
    }
    input::-webkit-input-placeholder {
      .font16;
      color: #adadad;
    }
    .btn {
      color: #000;
      font-size: .14rem;
    }
  }

  .search-list {
    height: .7rem;
    align-items: center;
    .img {
      border-radius: 50%;
      width: .4rem;
      height: .4rem;
      margin-right: .1rem;
    }
    .name {
      .font16;
      .color4a;
      margin-right: .1rem;
    }
    .num {
      .font16;
      .color4a;
      span {
        color: #66A1E6;
      }
    }
  }

  .search-none {
    margin-top: .35rem;
    text-align: center;
    p {
      .font16;
      margin-top: .09rem;
      color: #818181;
    }
  }

</style>
<script>
  import {checkStatus} from '../../assets/js/login';
  import Client from '@/assets/js/common';
  import {Toast} from 'mint-ui'
  import {axiosPost} from '../../assets/api'
  export default {
    data () {
      return {
        tabList: ['找人', '找群'],
        addClass: 0, // tab 样式
        val: 0,
        searchVal: '', // 搜索值
        searchList: '',
        seachType:this.$route.query.type,
        noResult: false, // 无搜索结果
        noGroupResult: false,
        groupRes: [], // 根据ID查询群组结果
        isGroup: '', // 是否搜索群组
        defaultImg:Client.defaultImg
      }
    },
    created(){
      if(this.seachType == 'GROUP'){
          this.tabSelect('找群',1);
      }
      checkStatus((loginInfo) => {
      });
    },
    mounted () {
      
    },
    methods: {
      // 找人
      searchFriend(loginInfo) {
        let tag_list = [
          "Tag_Profile_IM_Nick", //昵称
          "Tag_Profile_IM_Gender", //性别
          "Tag_Profile_IM_AllowType", //加好友方式
          "Tag_Profile_IM_Image" //头像
        ];
        let objs = {
          To_Account: [this.searchVal],
          TagList: tag_list
        };
        //搜索用户
        webim.getProfilePortrait(
          objs,
          resp => {
            this.noResult = false
            if (resp.UserProfileItem && resp.UserProfileItem.length > 0) {
              let userInfos = resp.UserProfileItem[0];
              if (userInfos.ProfileItem) {
                let sonItem = userInfos.ProfileItem;
                sonItem.forEach((ele, index) => {
                  userInfos[ele.Tag] = ele.Value;
                });
                delete resp.UserProfileItem[0].ProfileItem  // 删除属性
                this.searchList = userInfos;
              }
            }
            /** */
          },
          err => {
            /* 目前仅支持精确搜索*/

            this.searchList = '';
            this.noResult = true
            console.log(err.ErrorInfo);
          }
        );
      },
      // 返回
      back(){
        history.back()
      },
      // tab切换
      tabSelect(val, key){
        this.addClass = key
        if (key == 0) {
          this.val = 0
          this.isGroup = false;
        } else if (key == 1) {
          this.val = 11
          this.isGroup = true;
        }
      },
      // 搜索
      search(){
        if (this.isGroup) {//搜索 群组
          this.searchGroupById();
          return;

        } else { //搜索 好友
          if (!this.searchVal.trim()) {
            Toast('搜索内容不能为空')
            return
          }
          this.searchFriend()
        }

      },
      // 搜索列表点击详情
      toDetails(account){
        this.$router.push({path: '/friendDetails', query: {id: account}});
      },
      //------------------
      // 群组ID搜索
      searchGroupById(){
        let That = this;
        if (this.searchVal.length == 0) {
          Toast('请输入群组ID');
          return;
        }
        if (webim.Tool.trimStr(this.searchVal).length == 0) {
          Toast('您输入的群组ID全是空格,请重新输入');

          return;
        }
        var options = {
          'GroupIdList': [
            this.searchVal
          ],
          'GroupBasePublicInfoFilter': [
            'Type',
            'Name',
            'Introduction',
            'Notification',
            'FaceUrl',
            'CreateTime',
            'Owner_Account',
            'LastInfoTime',
            'LastMsgTime',
            'NextMsgSeq',
            'MemberNum',
            'MaxMemberNum',
            'ApplyJoinOption'
          ]
        };
        webim.getGroupPublicInfo(
          options,
          function (resp) {
            That.noGroupResult = false;
            let data = [];
            if (resp.GroupInfo && resp.GroupInfo.length > 0) {
              for (let i in resp.GroupInfo) {
                if (resp.GroupInfo[i].ErrorCode > 0) {
                  //alert(resp.GroupInfo[i].ErrorInfo);
                  return;
                }
                let group_id = resp.GroupInfo[i].GroupId;
                let name = webim.Tool.formatText2Html(resp.GroupInfo[i].Name);
                let type_zh = webim.Tool.groupTypeEn2Ch(resp.GroupInfo[i].Type);
                let FaceUrl = resp.GroupInfo[i].FaceUrl;
                let type = resp.GroupInfo[i].Type;
                let owner_account = resp.GroupInfo[i].Owner_Account;
                let create_time = webim.Tool.formatTimeStamp(resp.GroupInfo[i].CreateTime);
                let member_num = resp.GroupInfo[i].MemberNum;
                let notification = webim.Tool.formatText2Html(resp.GroupInfo[i].Notification);
                let introduction = webim.Tool.formatText2Html(resp.GroupInfo[i].Introduction);
                data.push({
                  'GId': group_id,
                  'GroupId': webim.Tool.formatText2Html(group_id),
                  'Name': name,
                  'TypeZh': type_zh,
                  'Type': type,
                  'Owner_Account': owner_account,
                  'MemberNum': member_num,
                  'Notification': notification,
                  'Introduction': introduction,
                  'CreateTime': create_time,
                  'FaceUrl': FaceUrl
                });
              }
            }
            That.groupRes = data;
          },
          err => {
            // if(err.GroupInfo[0].ErrorCode == 10015) { //搜索数组ID不存在
            //   That.searchGroupByName();
            // }
            That.groupRes = [];
            That.noGroupResult = true;
          }
        );
      },
      //搜索群（按名称）
      searchGroupByName() {
        let options = {
          'Content': this.searchVal, //群名称
          "PageNum": 0, //0表示从第1页开始拉取
          "GroupPerPage": 20, //每页拉取20条
          'ResponseFilter': {
            "GroupBasePublicInfoFilter": [ //基础信息过滤器，可以通过它设置需要拉取的公开的基础信息
              'Type', //群组类型
              'Name', //群名称
              "FaceUrl", //群头像
              "Introduction", //群简介
              'CreateTime', //群创建时间
              'Owner_Account', //群创建者
              'MemberNum', //成员个数
              'MaxMemberNum', //群成员最大个数
              'ApplyJoinOption' //申请加群选项
            ]
          }
        };
        webim.searchGroupByName(
          options,
          resp => {
            console.log('load', resp);
            var data = [];
            if (resp.GroupInfo && resp.GroupInfo.length > 0) {
              for (var i in resp.GroupInfo) {
                if (resp.GroupInfo[i].ErrorCode > 0) {
                  //alert(resp.GroupInfo[i].ErrorInfo);
                  return;
                }
                var group_id = resp.GroupInfo[i].GroupId;
                var name = webim.Tool.formatText2Html(resp.GroupInfo[i].Name);
                var type_zh = webim.Tool.groupTypeEn2Ch(resp.GroupInfo[i].Type);
                var type = resp.GroupInfo[i].Type;
                var owner_account = resp.GroupInfo[i].Owner_Account;
                var create_time = webim.Tool.formatTimeStamp(resp.GroupInfo[i].CreateTime);
                var member_num = resp.GroupInfo[i].MemberNum;
                var faceUrl = resp.GroupInfo[i].FaceUrl;
                var introduction = webim.Tool.formatText2Html(resp.GroupInfo[i].Introduction);
                var maxMemberNum = resp.GroupInfo[i].MaxMemberNum;
                var applyJoinOption = resp.GroupInfo[i].ApplyJoinOption;
                data.push({
                  'GId': group_id,
                  'GroupId': webim.Tool.formatText2Html(group_id),
                  'Name': name,
                  'TypeZh': type_zh,
                  'Type': type,
                  'Owner_Account': owner_account,
                  'MemberNum': member_num,
                  'FaceUrl': faceUrl,
                  'Introduction': introduction,
                  'CreateTime': create_time
                });
              }
            }
            console.log('load', data);
          },
          err => {
            Client.errInfo();
            //alert(err.ErrorInfo);
          }
        );
      },

      // 搜索群组详情
      toGroupDetails(groupData) {
        Client.setStore('searchGroupData', groupData);
        this.$router.push({path: '/searchGroupDetails'});
      }
    },
    computed: {
      placeStr(){
        return this.addClass == 0 ? '请输入用户ID' : '请输入群ID'
      }
    }
  }

</script>
